<template>
  <div class="travel-preferences-section">
    <!-- 模块标题 -->
    <div class="section-header">
      <div class="header-left">
        <el-icon class="section-icon"><MapLocation /></el-icon>
        <h3 class="section-title">旅游偏好</h3>
        <el-tag v-if="completionPercentage < 100" type="info" size="small">
          完成度 {{ completionPercentage }}%
        </el-tag>
        <el-tag v-else type="success" size="small">
          <el-icon><CircleCheck /></el-icon>
          已完成
        </el-tag>
      </div>
      <div class="header-right">
        <el-tooltip content="旅游偏好信息为可选填写，有助于为客户推荐合适的旅游产品">
          <el-icon class="info-icon"><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>

    <!-- 旅游偏好表单 -->
    <div class="section-content">
      <!-- 出行预算偏好区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><Money /></el-icon>
          <span>出行预算偏好</span>
          <span class="optional-mark">建议填写</span>
        </div>
        
        <el-form 
          ref="budgetFormRef"
          :model="formData.budget"
          label-width="120px"
          label-position="left"
          class="budget-form"
        >
          <el-row :gutter="24">
            <!-- 预算范围 -->
            <el-col :span="12">
              <el-form-item label="预算范围">
                <el-select 
                  v-model="formData.budget.budgetRange" 
                  placeholder="请选择预算范围"
                  class="full-width"
                >
                  <el-option 
                    label="经济型 (3000元以下)" 
                    value="经济型"
                  >
                    <div class="budget-option">
                      <span class="budget-label">经济型</span>
                      <span class="budget-desc">3000元以下</span>
                    </div>
                  </el-option>
                  <el-option 
                    label="舒适型 (3000-8000元)" 
                    value="舒适型"
                  >
                    <div class="budget-option">
                      <span class="budget-label">舒适型</span>
                      <span class="budget-desc">3000-8000元</span>
                    </div>
                  </el-option>
                  <el-option 
                    label="品质型 (8000-15000元)" 
                    value="品质型"
                  >
                    <div class="budget-option">
                      <span class="budget-label">品质型</span>
                      <span class="budget-desc">8000-15000元</span>
                    </div>
                  </el-option>
                  <el-option 
                    label="豪华型 (15000元以上)" 
                    value="豪华型"
                  >
                    <div class="budget-option">
                      <span class="budget-label">豪华型</span>
                      <span class="budget-desc">15000元以上</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 支付偏好 -->
            <el-col :span="12">
              <el-form-item label="支付偏好">
                <el-select 
                  v-model="formData.budget.paymentPreference" 
                  placeholder="请选择支付方式"
                  class="full-width"
                >
                  <el-option 
                    v-for="payment in paymentOptions" 
                    :key="payment.value"
                    :label="payment.label" 
                    :value="payment.value"
                  >
                    <div class="payment-option">
                      <el-icon :class="payment.icon"></el-icon>
                      <span>{{ payment.label }}</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!-- 消费特点 -->
            <el-col :span="24">
              <el-form-item label="消费特点">
                <el-checkbox-group v-model="formData.budget.consumptionFeatures">
                  <el-checkbox 
                    v-for="feature in consumptionOptions" 
                    :key="feature.value"
                    :value="feature.value"
                  >
                    {{ feature.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 目的地偏好区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><Location /></el-icon>
          <span>目的地偏好</span>
          <span class="optional-mark">建议填写</span>
        </div>
        
        <el-form 
          ref="destinationFormRef"
          :model="formData.destinations"
          label-width="120px"
          label-position="left"
          class="destination-form"
        >
          <el-row :gutter="24">
            <!-- 国内地域偏好 -->
            <el-col :span="12">
              <el-form-item label="国内偏好">
                <el-checkbox-group v-model="formData.destinations.domesticRegions">
                  <el-checkbox 
                    v-for="region in domesticRegions" 
                    :key="region.value"
                    :value="region.value"
                  >
                    {{ region.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <!-- 国外地域偏好 -->
            <el-col :span="12">
              <el-form-item label="国外偏好">
                <el-checkbox-group v-model="formData.destinations.internationalRegions">
                  <el-checkbox 
                    v-for="region in internationalRegions" 
                    :key="region.value"
                    :value="region.value"
                  >
                    {{ region.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <!-- 景观偏好 -->
            <el-col :span="24">
              <el-form-item label="景观偏好">
                <el-checkbox-group v-model="formData.destinations.landscapePreferences">
                  <el-checkbox 
                    v-for="landscape in landscapeOptions" 
                    :key="landscape.value"
                    :value="landscape.value"
                  >
                    {{ landscape.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <!-- 气候偏好 -->
            <el-col :span="24">
              <el-form-item label="气候偏好">
                <el-checkbox-group v-model="formData.destinations.climatePreferences">
                  <el-checkbox 
                    v-for="climate in climateOptions" 
                    :key="climate.value"
                    :value="climate.value"
                  >
                    {{ climate.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 出行安排偏好区块 -->
      <div class="info-block">
        <div class="block-title">
          <el-icon><Calendar /></el-icon>
          <span>出行安排偏好</span>
          <span class="optional-mark">可选填写</span>
        </div>
        
        <el-form 
          ref="arrangementFormRef"
          :model="formData.arrangements"
          label-width="120px"
          label-position="left"
          class="arrangement-form"
        >
          <el-row :gutter="24">
            <!-- 出行时间偏好 -->
            <el-col :span="12">
              <el-form-item label="时间偏好">
                <div>
                  <div style="margin-bottom: 16px;">
                    <span style="display: block; font-size: 14px; color: #3C3C43; margin-bottom: 8px;">季节偏好：</span>
                    <el-checkbox-group v-model="formData.arrangements.seasonPreferences">
                      <el-checkbox value="春季">春季</el-checkbox>
                      <el-checkbox value="夏季">夏季</el-checkbox>
                      <el-checkbox value="秋季">秋季</el-checkbox>
                      <el-checkbox value="冬季">冬季</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  
                  <div>
                    <span style="display: block; font-size: 14px; color: #3C3C43; margin-bottom: 8px;">月份偏好：</span>
                    <el-checkbox-group v-model="formData.arrangements.monthPreferences">
                      <el-checkbox 
                        v-for="month in monthOptions" 
                        :key="month.value"
                        :value="month.value"
                      >
                        {{ month.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <!-- 出行天数 -->
            <el-col :span="12">
              <el-form-item label="出行天数">
                <el-radio-group v-model="formData.arrangements.travelDuration">
                    <el-radio value="短途">短途</el-radio>
                    <el-radio value="中途">中途</el-radio>
                    <el-radio value="长途">长途</el-radio>
                    <el-radio value="超长">超长</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <!-- 交通工具偏好 -->
            <el-col :span="12">
              <el-form-item label="交通工具">
                <el-checkbox-group v-model="formData.arrangements.transportPreferences">
                  <el-checkbox 
                    v-for="transport in transportOptions" 
                    :key="transport.value"
                    :value="transport.value"
                  >
                    {{ transport.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <!-- 住宿标准 -->
            <el-col :span="12">
              <el-form-item label="住宿标准">
                <el-radio-group v-model="formData.arrangements.accommodationStandard">
                    <el-radio 
                      v-for="accommodation in accommodationOptions" 
                      :key="accommodation.value"
                      :value="accommodation.value"
                    >
                      {{ accommodation.label }}
                    </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  MapLocation, CircleCheck, QuestionFilled, Money, Location, Calendar,
  CreditCard, Operation, Van, House, Star, Warning
} from '@element-plus/icons-vue'

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['validation-change'])

// 表单引用
const budgetFormRef = ref()
const destinationFormRef = ref()
const arrangementFormRef = ref()

// 完成度计算
const completionPercentage = computed(() => {
  const fields = [
    props.formData.budget?.budgetRange,
    props.formData.budget?.paymentPreference,
    props.formData.budget?.consumptionFeatures?.length > 0,
    props.formData.destinations?.domesticRegions?.length > 0,
    props.formData.destinations?.internationalRegions?.length > 0,
    props.formData.destinations?.landscapePreferences?.length > 0,
    props.formData.destinations?.climatePreferences?.length > 0
  ]
  
  const filledFields = fields.filter(field => field).length
  return Math.round((filledFields / fields.length) * 100)
})

// 支付方式选项
const paymentOptions = [
  { value: '现金支付', label: '现金支付', icon: 'Money' },
  { value: '银行转账', label: '银行转账', icon: 'CreditCard' },
  { value: '微信支付', label: '微信支付', icon: 'ChatDotRound' },
  { value: '支付宝', label: '支付宝', icon: 'Wallet' },
  { value: '刷卡', label: '刷卡', icon: 'CreditCard' }
]

// 消费特点选项
const consumptionOptions = [
  { 
    value: '价格敏感', 
    label: '价格敏感', 
    description: '重视性价比，对价格变动敏感',
    icon: 'DataAnalysis'
  },
  { 
    value: '追求性价比', 
    label: '追求性价比', 
    description: '希望以合理价格获得优质服务',
    icon: 'Opportunity'
  },
  { 
    value: '注重品质', 
    label: '注重品质', 
    description: '愿意为优质体验支付更高费用',
    icon: 'Star'
  },
  { 
    value: '预算充足', 
    label: '预算充足', 
    description: '对价格不敏感，追求最佳体验',
    icon: 'Money'
  }
]

// 国内地域选项
const domesticRegions = [
  { value: '华北', label: '华北' },
  { value: '华东', label: '华东' },
  { value: '华南', label: '华南' },
  { value: '华中', label: '华中' },
  { value: '西南', label: '西南' },
  { value: '西北', label: '西北' },
  { value: '东北', label: '东北' },
  { value: '港澳台', label: '港澳台' }
]

// 国际地域选项
const internationalRegions = [
  { value: '东南亚', label: '东南亚' },
  { value: '日韩', label: '日韩' },
  { value: '欧洲', label: '欧洲' },
  { value: '澳新', label: '澳新' },
  { value: '美洲', label: '美洲' },
  { value: '其他', label: '其他' }
]

// 景观偏好选项
const landscapeOptions = [
  { 
    value: '山水风景', 
    label: '山水风景', 
    description: '山川河流，自然美景',
    icon: 'Star'
  },
  { 
    value: '海滨度假', 
    label: '海滨度假', 
    description: '海边沙滩，休闲度假',
    icon: 'Star'
  },
  { 
    value: '草原沙漠', 
    label: '草原沙漠', 
    description: '辽阔草原，大漠风光',
    icon: 'Star'
  },
  { 
    value: '森林公园', 
    label: '森林公园', 
    description: '原始森林，生态公园',
    icon: 'Orange'
  },
  { 
    value: '历史古迹', 
    label: '历史古迹', 
    description: '历史建筑，文化遗产',
    icon: 'Monument'
  },
  { 
    value: '宗教文化', 
    label: '宗教文化', 
    description: '寺庙教堂，宗教圣地',
    icon: 'School'
  },
  { 
    value: '民俗风情', 
    label: '民俗风情', 
    description: '民族文化，风土人情',
    icon: 'User'
  },
  { 
    value: '都市观光', 
    label: '都市观光', 
    description: '现代都市，城市风光',
    icon: 'OfficeBuilding'
  },
  { 
    value: '温泉养生', 
    label: '温泉养生', 
    description: '温泉度假，健康养生',
    icon: 'Coin'
  },
  { 
    value: '美食文化', 
    label: '美食文化', 
    description: '特色美食，饮食文化',
    icon: 'Food'
  },
  { 
    value: '购物娱乐', 
    label: '购物娱乐', 
    description: '购物天堂，娱乐休闲',
    icon: 'ShoppingBag'
  },
  { 
    value: '摄影采风', 
    label: '摄影采风', 
    description: '风光摄影，采风创作',
    icon: 'Camera'
  }
]

// 气候偏好选项
const climateOptions = [
  { value: '温带', label: '温带', icon: 'Star', type: 'success' },
  { value: '亚热带', label: '亚热带', icon: 'Warning', type: 'warning' },
  { value: '热带', label: '热带', icon: 'Star', type: 'danger' },
  { value: '高原', label: '高原', icon: 'Warning', type: 'info' },
  { value: '避暑', label: '避暑', icon: 'Warning', type: 'primary' },
  { value: '避寒', label: '避寒', icon: 'Star', type: 'warning' }
]

// 月份选项
const monthOptions = [
  { value: '1月', label: '1月' }, { value: '2月', label: '2月' },
  { value: '3月', label: '3月' }, { value: '4月', label: '4月' },
  { value: '5月', label: '5月' }, { value: '6月', label: '6月' },
  { value: '7月', label: '7月' }, { value: '8月', label: '8月' },
  { value: '9月', label: '9月' }, { value: '10月', label: '10月' },
  { value: '11月', label: '11月' }, { value: '12月', label: '12月' }
]

// 交通工具选项
const transportOptions = [
  { value: '飞机', label: '飞机', icon: 'Operation' },
  { value: '高铁', label: '高铁', icon: 'Operation' },
  { value: '普通火车', label: '普通火车', icon: 'Operation' },
  { value: '大巴车', label: '大巴车', icon: 'Van' },
  { value: '自驾车', label: '自驾车', icon: 'Van' }
]

// 住宿标准选项
const accommodationOptions = [
  { value: '经济型酒店', label: '经济型酒店', stars: 2 },
  { value: '舒适型酒店', label: '舒适型酒店', stars: 3 },
  { value: '高档酒店', label: '高档酒店', stars: 4 },
  { value: '度假村', label: '度假村', stars: 5 },
  { value: '民宿客栈', label: '民宿客栈', stars: 3 }
]

// 初始化表单数据结构
if (!props.formData.budget) {
  props.formData.budget = {
    budgetRange: '',
    consumptionFeatures: [],
    paymentPreference: ''
  }
}

if (!props.formData.destinations) {
  props.formData.destinations = {
    domesticRegions: [],
    internationalRegions: [],
    landscapePreferences: [],
    climatePreferences: []
  }
}

if (!props.formData.arrangements) {
  props.formData.arrangements = {
    seasonPreferences: [],
    monthPreferences: [],
    travelDuration: '',
    transportPreferences: [],
    accommodationStandard: ''
  }
}
</script>

<style lang="scss" scoped>
.travel-preferences-section {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E5EA;
    background: #F8F9FF;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .section-icon {
        font-size: 20px;
        color: #007AFF;
      }
      
      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #000000;
        margin: 0;
      }
    }
    
    .header-right {
      .info-icon {
        font-size: 16px;
        color: #8E8E93;
        cursor: help;
      }
    }
  }
  
  .section-content {
    padding: 24px;
  }
  
  .info-block {
    margin-bottom: 32px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .block-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #3C3C43;
      
      .el-icon {
        font-size: 18px;
        color: #007AFF;
      }
      
      .optional-mark {
        background: #5AC8FA;
        color: white;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        margin-left: auto;
      }
    }
  }
  
  .full-width {
    width: 100%;
  }
  
  // 预算选项样式
  .budget-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    .budget-label {
      font-weight: 500;
    }
    
    .budget-desc {
      color: #8E8E93;
      font-size: 12px;
    }
  }
  
  .payment-option {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
}

// 响应式适配
@media (max-width: 768px) {
  .travel-preferences-section {
    .section-content {
      padding: 16px;
    }
  }
}
</style>